<template>
	<!-- 仿天猫首页二级页面跳转tap -->
	<view class="contain">
		<view class="main">
			<view class="nav" v-if="navListLoading">
				<swiper class="swiper-container with-transition" :style="'height:' + navSwiperH + 'rpx;'"
					@change="onSwiperChange">
					<swiper-item v-for="(items, indexs) in navList" :key="indexs">
						<view class="row-wrap">
							<view v-for="(item, index) in items" :key="index" class="nav-item">
								<view @tap="tapMenu(index)" class="nav-text">
									<image class="nav-icon" :src="path + item.categoryImage"></image>
									<view :class="['nameText',currentIndex === index && currentIndexs == navIndex ? 'active' : '']">
										{{ item.categoryName }}
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="nav-title-icon">
					<view v-for="(items, index) in navList">
						<view :class="['title-icon', navIndex == index ? 'title-icon2' : '']" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const swiperH = 187;
	export default {
		name: 'x-swiper-nav',
		props: {
			navList: {
				type: Array,
				required: true // 设置为必传
			},
			navListLoading: {
				type: Boolean,
				default: true
			},
			path: {
				type: String,
				required: true // 设置为必传
			}
		},
		data() {
			return {
				navIndex: 0,
				currentIndex: 0,
				currentIndexs: 0,
			};
		},
		computed: {
			navSwiperH() {
				// 确保navList存在并且有当前索引的项
				// if (this.navList && this.navList[this.navIndex]) {
				// 	return this.navList[this.navIndex].length > 4 ? 2 * swiperH : swiperH;
				// }
				return swiperH * 2; // 默认值
			}
		},
		methods: {
			onSwiperChange(event) {
				this.navIndex = event.detail.current;
			},
			tapMenu(value) {
				this.currentIndex = value
				this.currentIndexs = this.navIndex
				let num = this.navIndex * 8 + value
				this.$emit('product', num);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.active {
		background-color: #3459ff;
		padding: 4rpx 0;
		border-radius: 20rpx;
		color: #fff;
	}

	.contain {
		margin-top: 30rpx;

		.main {
			position: relative;
			z-index: 9;
			padding: 0 20rpx;

			.nav {
				position: relative;
				border-radius: 14rpx;
				background-color: #fff;

				.swiper-container {
					/* 默认禁用过渡 */
					transition: none;
				}

				/* 启用高度过渡效果 */
				.swiper-container.with-transition {
					transition: height 0.3s ease-in-out;
				}

				.row-wrap {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}

				.nav-title-icon {
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.title-icon {
						width: 15rpx;
						height: 7rpx;
						border-radius: 8rpx;
						margin: 0 10rpx;
						background-color: #cbcccb;
					}

					.title-icon2 {
						width: 38rpx;
						background-color: #000;
						transition: width 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.4s ease, transform 0.3s ease;
					}
				}

				.nav-item {
					width: 20%;
					margin-top: 10rpx;
					margin-bottom: 20rpx;

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.nav-text {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.nav-icon {
							width: 100rpx;
							height: 100rpx;
							margin-bottom: 10rpx;
						}

						.nameText {
							width: 130rpx;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							/* 限制为两行 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 23rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}
					}
				}
			}

			.information {
				height: 76rpx;
				box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 14rpx;

				.news {
					position: relative;

					.shade {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
					}
				}

				.icon-toutiao {
					width: 114rpx;
					height: 34rpx;
				}

				.gap-line {
					height: 28rpx;
					width: 1px;
					background-color: #dcdddc;
					margin: 0 30rpx;
				}
			}

			.seckill {
				.dec {
					background-color: #fffbdb;
					width: 150rpx;
				}
			}

			.hot,
			.new-goods {
				.title-image {
					width: 144rpx;
					height: 55rpx;
				}
			}
		}
	}
</style>